<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易购物车案例</title>
    <!-- 导入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            text-align: center;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2
        }

        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>

<body>
    <div id="app">
        <table>
            <tr>
                <th>编号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(book, index) in books">
                <td>{{ index + 1 }}</td>
                <td>{{ book.name }}</td>
                <td>{{ book.date }}</td>
                <td>￥{{ book.price }}</td>
                <td>
                    <span><button :disabled="book.amount === 1" @click="subAmount(index)">-</button></span>
                    &nbsp;{{ book.amount }}&nbsp;
                    <span><button @click="addAmount(index)">+</button</span>
                </td>
                <td><button @click="removeBook(index)">移除</button></td>
            </tr>
        </table>
        <h2>总价格: ￥{{ total }}</h2>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            books: [
                {
                    name: "java编程思想",
                    date: "2020-9",
                    price: "98.00",
                    amount: 1
                },
                {
                    name: "数据分析与数据原理",
                    date: "2019-2",
                    price: "39.00",
                    amount: 1
                },
                {
                    name: "Hadoop权威指南",
                    date: "2019-10",
                    price: "59.00",
                    amount: 1
                },
                {
                    name: "代码大全",
                    date: "2018-08",
                    price: "128.00",
                    amount: 1
                }
            ]
        },
        computed: {
            // 计算总价
            total : function() {
                var sum = 0;
                this.books.forEach(element => {
                    sum += parseFloat(element.price) * element.amount;
                });
                return sum.toFixed(2);
            }
        },
        methods: {
            // 移除操作
            removeBook : function(index) {
                this.books.splice(index, 1);
            },
            // 添加购买数量
            addAmount : function(index) {
                this.books[index].amount += 1;
            },
            // 减少购买数量
            subAmount : function(index) {
                this.books[index].amount -= 1;
            }
        }
    })
</script>

</html>